<template>
  <div class="secure-form-example">
    <h2>安全表单示例</h2>
    
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>用户名:</label>
        <input
          v-model="formData.username"
          type="text"
          placeholder="请输入用户名"
          @blur="validateUsername"
          @input="debouncedValidateUsername"
        >
        <span v-if="errors.username" class="error">{{ errors.username }}</span>
      </div>

      <div class="form-group">
        <label>密码:</label>
        <input
          v-model="formData.password"
          type="password"
          placeholder="请输入密码"
          @blur="validatePassword"
        >
        <span v-if="errors.password" class="error">{{ errors.password }}</span>
      </div>

      <div class="form-group">
        <label>邮箱:</label>
        <input
          v-model="formData.email"
          type="email"
          placeholder="请输入邮箱"
          @blur="validateEmail"
          @input="debouncedValidateEmail"
        >
        <span v-if="errors.email" class="error">{{ errors.email }}</span>
      </div>

      <div class="form-group">
        <label>手机号:</label>
        <input
          v-model="formData.phone"
          type="tel"
          placeholder="请输入手机号"
          @blur="validatePhone"
          @input="debouncedValidatePhone"
        >
        <span v-if="errors.phone" class="error">{{ errors.phone }}</span>
      </div>

      <button type="submit" :disabled="!isFormValid || submitting" class="submit-btn">
        {{ submitting ? '提交中...' : '提交' }}
      </button>
    </form>
  </div>
</template>

<script>
import { validateUsername, validatePassword, validateEmail, validatePhone } from '@/utils/validation';
import { debounce } from '@/utils/debounce';

export default {
  name: 'SecureFormExample',
  data() {
    return {
      formData: {
        username: '',
        password: '',
        email: '',
        phone: ''
      },
      errors: {},
      submitting: false
    };
  },
  computed: {
    isFormValid() {
      return this.formData.username &&
             this.formData.password &&
             this.formData.email &&
             this.formData.phone &&
             !this.errors.username &&
             !this.errors.password &&
             !this.errors.email &&
             !this.errors.phone;
    }
  },
  methods: {
    // 使用防抖的验证方法
    debouncedValidateUsername: debounce(function() {
      this.validateUsername();
    }, 300),
    
    debouncedValidateEmail: debounce(function() {
      this.validateEmail();
    }, 300),
    
    debouncedValidatePhone: debounce(function() {
      this.validatePhone();
    }, 300),

    validateUsername() {
      const result = validateUsername(this.formData.username);
      if (result.valid) {
        this.$delete(this.errors, 'username');
      } else {
        this.$set(this.errors, 'username', result.message);
      }
    },

    validatePassword() {
      const result = validatePassword(this.formData.password);
      if (result.valid) {
        this.$delete(this.errors, 'password');
      } else {
        this.$set(this.errors, 'password', result.message);
      }
    },

    validateEmail() {
      const result = validateEmail(this.formData.email);
      if (result.valid) {
        this.$delete(this.errors, 'email');
      } else {
        this.$set(this.errors, 'email', result.message);
      }
    },

    validatePhone() {
      const result = validatePhone(this.formData.phone);
      if (result.valid) {
        this.$delete(this.errors, 'phone');
      } else {
        this.$set(this.errors, 'phone', result.message);
      }
    },

    async handleSubmit() {
      // 最终验证
      this.validateUsername();
      this.validatePassword();
      this.validateEmail();
      this.validatePhone();

      if (!this.isFormValid) {
        return;
      }

      this.submitting = true;
      try {
        // 这里调用API提交表单
        // const response = await api.submitForm(this.formData);
        console.log('提交表单:', this.formData);
        alert('表单提交成功！');
      } catch (error) {
        console.error('提交失败:', error);
        alert('提交失败，请重试');
      } finally {
        this.submitting = false;
      }
    }
  }
};
</script>

<style scoped>
.secure-form-example {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group input:focus {
  outline: none;
  border-color: #4CAF50;
}

.error {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover:not(:disabled) {
  background-color: #45a049;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

